<template>
  <div>
    <div class="header">
      <span class="headerFont">{{title}}</span>
      <i class="el-icon-warning-outline" style="margin-left: 20px"></i>
    </div>
    <div class="main" style="margin-top: 10px">
      <span style="margin-right: 30px;font-size: 30px">{{searchCount}}</span>
      <span>17.1</span>
      <i class="el-icon-caret-top"></i>
    </div>
    <div class="footer" style="margin-top: 10px">
      <div class="charts" ref="charts"></div>

    </div>
  </div>
</template>

<script>
import* as echarts from "echarts";
export default {
  props:['searchCount','title','searchList'],
  name: "LineCharts",
  data(){
    return{
      Linecharts:null,
    }
  },
  mounted() {
    this.Linecharts = echarts.init(this.$refs.charts)
    //配置options
    let option = {
      xAxis:{
        show:false,
        type: 'category',
      },
      yAxis:{
        show:false
      },
      tooltip: {},
      series:{
        type:'line',

        //隐藏拐点
        itemStyle:{
          opacity:0
        },
        //线条样式
        lineStyle:{
          color:'purple'
        },
        //区域填充样式
        areaStyle:{
          color:{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#20a0ff' // 0% 处的颜色
            }, {
              offset: 1, color: '#fff' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }
      },
      //布局调试
      grid:{
        left:0,
        top:0,
        right:0,
        bottom:0
      }
    }
   this.Linecharts.setOption(option)
  },
  computed:{
    SearchList(){
      return this.searchList
    }
  },
  watch:{
    SearchList(){
      this.Linecharts.setOption({
        series:{
          data:this.SearchList
        }
      })
    }
  }
}
</script>

<style scoped>
.headerFont{
  color: #8c939d;

}
.charts{
  width: 100%;
  height: 50px;
}
</style>
